<template>
  <div :style="{ width: width + 'px' }">
    <a-popover :placement="'top'">
      <template slot="content">
        <div class="popover-title">推荐系数：{{ score.toFixed(2) }}</div>
        <div class="recommend-score header-score">
          字段名推荐：{{ headerScore.toFixed(2) }}
        </div>
        <div class="recommend-score value-score">
          字段值推荐：{{ valueScore.toFixed(2) }}
        </div>
      </template>
      <div
        class="coefficient-bar"
        :style="{ width: nameBarWidth + fieldBarWidth + 'px' }"
      >
        <div class="name-bar" :style="{ width: nameBarWidth + 'px' }"></div>
        <div class="field-bar" :style="{ width: fieldBarWidth + 'px' }"></div>
      </div>
    </a-popover>
  </div>
</template>

<script lang="ts">
/**
 * 推荐联接字句 popover 显示 匹配系数直方图
 */
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class PopoverCoefficientBar extends Vue {
  @Prop({ type: Number, default: 0 }) score!: number // 推荐系数
  @Prop({ type: Number, default: 0 }) headerScore!: number // 字名推荐
  @Prop({ type: Number, default: 0 }) valueScore!: number // 字段推荐
  @Prop({ type: Number, default: 200 }) width!: number // bar width

  // 字名系数
  public get nameBarWidth() {
    return this.headerScore * this.width
  }

  // 字段系数
  public get fieldBarWidth() {
    return this.valueScore * this.width
  }
}
</script>

<style lang="less" scoped>
.popover-title {
  font-size: 14px;
  font-weight: 600;
  height: 29px;
  line-height: 29px;
  padding-left: 10px;
}

.recommend-score {
  font-size: 12px;
  height: 29px;
  line-height: 29px;
  padding-left: 10px;
  position: relative;

  &::before {
    content: '';
    height: 29px;
    left: 0;
    position: absolute;
    top: 0;
    width: 2px;
  }
}

.header-score {
  &::before {
    background-color: #8289dd;
  }
}

.value-score {
  &::before {
    background-color: #ced0ed;
  }
}

.coefficient-bar {
  display: flex;

  .name-bar {
    background-color: #8289dd;
    height: 15px;
  }

  .field-bar {
    background-color: #ced0ed;
    height: 15px;
  }
}
</style>
